//功能一：菜单显示功能（全部商品分类）（10分）
$(function() {
    $allSortList2 = $('.all-sort-list2');
    $allSortList2.hover(function(){
        $(this).find('.item-list').show()
    },function () {
        $(this).find('.item-list').hide()
    })
});


//功能二：快速定位搜索框功能（10分）
$(function() {
    $(document).keyup(function (e) {
        if (e.key === 's') {
            $('#autocomplete').focus()
        }
    })
})


//功能三：回到顶部功能（10分）
$(function() {
    //重点看可参考：all.js中的tbar-tab-selected类的效果，也可自己设置样式
    $nav = $('.tbar-tab-top');
    $nav.on('mouseenter',()=>{
        $nav.addClass('tbar-tab-selected')
    })
    $nav.on('mouseleave',()=>{
        $nav.removeClass('tbar-tab-selected')
    })
    
    $nav.on('click',()=>{
        if ($(window).scrollTop() >= 200) {
            $('html,body').animate({
                scrollTop: 0
              }, 1000);
        }
    })
 
})


//功能四：轮播功能（20分）
$(function() {


    $hot = $('.hot')
    var $imgWidth = $('#myCarousel').innerWidth()
    $hot.css('width','10000%')
    $next = $('.right')
    $prev = $('.left')
    $circles = $('.circle-item')
    $myCarousel = $('#myCarousel')
    $towards = $('.towards')
    var i = 0;
    //添加节点
    var $first = $hot.children().first().clone()
    $hot.append($first)

    //添加轮播动画
    //下一页

    $next.on('click',()=>{
        nx()
    })
    function nx() {
        i++;
        $hot.css('transform','translateX('+(-i*$imgWidth)+'px)');
        $hot.css('transition','0.5s');
        console.log(i);
        
        if (i == $hot.children().length-1) {
            i=0;
            setTimeout(()=>{
                $hot.css('transform','translateX('+(-i*$imgWidth)+'px)');
                $hot.css('transition','none');
            },500)
        }
        setCircles()
    }



    //上一页
    $prev.on('click',()=>{
        if(i == 0){
            i = $hot.children().length-1;
            $hot.css('transform','translateX('+(-i*$imgWidth)+'px)');
            $hot.css('transition','none');
        }
        i--;

        setTimeout(() => {
            $hot.css('transform','translateX('+(-i*$imgWidth)+'px)');
            $hot.css('transition','0.5s');
          }, 0);
          setCircles()
    })
    //定时轮播
    var timer = setInterval(()=>{
        nx();
    },2000)

    //鼠标移入时
    $myCarousel.on('mouseenter',()=>{
        $towards.show()
        clearInterval(timer)
        timer = null
    })
    //鼠标移出时
    $myCarousel.on('mouseleave',()=>{
        $towards.hide()
        timer = setInterval(()=>{
            nx()
        },2000)
    })
    //设置小圆点
    var setCircles = ()=>{
        $circles.each(function() {
            var n = $(this).data('n');
            if (n == i) {
                $(this).addClass('active')
            }else{
                $(this).removeClass('active');
            }
        })
    }

// 添加小圆点的点击事件
        $circles.on('click', function() {
        i = $(this).data('n'); // 获取点击的小圆点的索引
        $hot.css('transform', 'translateX(' + (-i * $imgWidth) + 'px)');
        $hot.css('transition', '0.5s');
        setCircles(); // 更新小圆点状态
    });

})
